<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb>
        <a-breadcrumb-item>油库管理</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="pageContentWhole">
      <a-row :gutter="[48]">
        <a-col :span="8">
          <div id="liquidFill" style="width:100%;height:150px;"></div>
        </a-col>
        <a-col :span="8">
          <div class="ant-card-body1">
            <div class="caiG1">
              <p class="caiGou">采购入库（L）</p>
              <h1 class="cgYoul">{{truckOilInfo.purchaseOilVolume}}</h1>
            </div>
            <p class="cgSale">
              采购总金额（元）
              <span>{{truckOilInfo.purchaseAmount}}</span>
            </p>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="ant-card-body1">
            <div class="caiG2">
              <p class="caiGou">加油出库（L）</p>
              <h1 class="cgYoul">{{truckOilInfo.inAndOutOilVolume}}</h1>
            </div>
            <p class="cgSale">
              出库总金额（元）
              <span>{{truckOilInfo.inAndOutAmount}}</span>
            </p>
          </div>
        </a-col>
      </a-row>
      <a-form layout="inline" ref="form" :style="'margin-top:60px;'">
        <a-form-item v-if="searchTable1Show" label="结算对象">
          <a-input v-model="searchForm1.custName" />
        </a-form-item>
        <a-form-item v-if="searchTable1Show" label="发票状态">
          <a-select v-model="searchForm1.isSettle" class="selectWidth">
            <a-select-option key>全部</a-select-option>
            <a-select-option :key="0">未结清</a-select-option>
            <a-select-option :key="1">已结清</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item v-if="!searchTable1Show" label="车辆">
          <a-input v-model="searchForm2.truckNumber" />
        </a-form-item>
        <a-form-item v-if="!searchTable1Show" label="司机">
          <a-input v-model="searchForm2.driverName" />
        </a-form-item>

        <a-form-item label="日期">
          <a-range-picker :value="searchDateRange" @change="onChangeDate" />
        </a-form-item>

        <a-form-item>
          <a-button type="primary" @click="handleSubmit1">查询</a-button>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="createRecord">+ 添加记录</a-button>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="exportExcel">导出Excel</a-button>
        </a-form-item>
      </a-form>
      <a-tabs @change="tabChange" :tab-bar-style="{margin:'20px 0 0 0'}">
        <a-tab-pane :key="1" tab="采购入库" style="padding:0"></a-tab-pane>
        <a-tab-pane :key="2" tab="加油出库" style="padding:0"></a-tab-pane>
      </a-tabs>
      <a-row>
        <a-col :span="24">
          <a-table
            :columns="column"
            :loading="loading"
            :data-source="tableData"
            :pagination="pagination"
            :row-key="rowKey"
            :scroll="scrollX"
          >
            <template slot="invoiceNo" slot-scope="record">
              <a
                v-if="record.invoiceNo"
                style="margin-right:10px"
                @click="viewInvoice(record.purchaseId)"
              >{{record.invoiceNo}}</a>
              <a v-else @click="createInvoice(record.purchaseId)">添加发票</a>
            </template>

            <template slot="detail" slot-scope="record">
              <a @click="viewDetail(record.inAndOutId)">查看详情</a>
            </template>
          </a-table>
        </a-col>
      </a-row>
    </div>

    <a-modal
      :visible="visible"
      title="新增记录"
      :body-style="{padding:'24px 40px 0px 20px'}"
      :confirmLoading="confirmLoading"
      width="640px"
      centered
      destroyOnClose
      :maskClosable="false"
      @ok="handleAdd"
      @cancel="handleCancel"
    >
      <a-row>
        <a-col :span="23" offset="1">
          <a-form-model
            ref="rulesForm"
            :model="formx"
            :rules="formRules"
            :label-col="{span:8}"
            :wrapper-col="{span:16}"
          >
            <a-col :span="16">
              <a-form-model-item label="交易类型">
                <a-radio-group v-model="businessType" @change="handleChangeBusinessType">
                  <a-radio :value="1">采购入库</a-radio>
                  <a-radio :value="2">加油出库</a-radio>
                </a-radio-group>
              </a-form-model-item>
            </a-col>

            <template v-if="isbusinessType1">
              <a-col :span="16">
                <a-form-model-item label="采购油量(吨)" prop="oilWeight">
                  <a-input-number
                    v-model="form.oilWeight"
                    :min="0"
                    :precision="4"
                    style="width:100%"
                  />
                </a-form-model-item>
                <a-form-model-item label="油费单价(元/吨)" prop="priceWeight">
                  <a-input-number
                    v-model="form.priceWeight"
                    :min="0"
                    :precision="2"
                    :max="999999999999.99"
                    style="width:100%"
                  />
                </a-form-model-item>
                <a-form-model-item label="运费单价(元/L)" prop="priceFreight">
                  <a-input-number
                    v-model="form.priceFreight"
                    :min="0"
                    :precision="2"
                    :max="999999999999.99"
                    style="width:100%"
                  />
                </a-form-model-item>
                <a-form-model-item label="总单价(元/吨)" prop="price">
                  <a-input-number
                    v-model="form.price"
                    :min="0"
                    :precision="2"
                    :max="999999999999.99"
                    disabled
                    style="width:100%"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <p class="computedData">={{oilWeightComputed}} (L)</p>
                <p class="computedData">={{priceWeightComputed}} (元/L)</p>
                <p class="computedData">={{priceFreightComputed}} (元/吨)</p>
                <p class="computedData">={{priceComputed}} (元/L)</p>
              </a-col>

              <a-col :span="16">
                <a-col :span="8">
                  <p class="descData">购油金额(元)：</p>
                </a-col>
                <a-col :span="16">{{fee1}}</a-col>
              </a-col>
              <a-col :span="16">
                <a-col :span="8">
                  <p class="descData">运费金额(元)：</p>
                </a-col>
                <a-col :span="16">{{fee2}}</a-col>
              </a-col>
              <a-col :span="16">
                <a-col :span="8">
                  <p class="descData">交易金额(元)：</p>
                </a-col>
                <a-col :span="16">{{fee3}}</a-col>
              </a-col>
              <a-col :span="16">
                <a-form-model-item label="结算对象" prop="custId">
                  <a-select
                    show-search
                    :show-arrow="false"
                    :filter-option="false"
                    :default-active-first-option="false"
                    :not-found-content="null"
                    v-model="form.custId"
                    @search="handleNameChange"
                    @select="emptyChange"
                  >
                    <a-select-option v-for="d in nameLikeData" :key="d.id+''">{{ d.name }}</a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
            </template>

            <template v-if="!isbusinessType1">
              <a-col :span="16">
                <a-form-model-item label="加油量(L)" prop="oilVolume">
                  <a-input-number
                    v-model="form2.oilVolume"
                    @blur="checkPurchaseByOilVolume"
                    style="width:100%"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="16">
                <a-col :span="8">
                  <p class="descData">交易金额(元)：</p>
                </a-col>
                <a-col :span="16">
                  {{type2Data.totalAmount}}
                  <a
                    style="margin-left: 20px"
                    @click="() => {detailClose = !detailClose}"
                  >{{detailClose?'收起':'显示'}}明细</a>
                </a-col>
              </a-col>
              <a-col :span="20" offset="2" style="margin-bottom: 20px" v-show="detailClose">
                <a-table
                  size="small"
                  :columns="type2Columns"
                  :data-source="type2Data.purchaseList"
                  :pagination="false"
                  rowKey="purchaseId"
                ></a-table>
              </a-col>
              <a-col :span="16">
                <a-form-model-item label="当前里程数(km)" prop="mileage">
                  <a-input-number
                    v-model="form2.mileage"
                    :min="0"
                    :max="999999999999.99"
                    :precision="2"
                    style="width:100%"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="16">
                <a-form-model-item label="车辆" prop="tractorId">
                  <a-select
                    show-search
                    :show-arrow="false"
                    :filter-option="false"
                    :default-active-first-option="false"
                    :not-found-content="null"
                    v-model="form2.tractorId"
                    @search="handleTruckNumberAndDriverChange"
                    @select="handleTruckNumberAndDriverSelect"
                  >
                    <a-select-option
                      v-for="(d) in truckNumberAndDriverData"
                      :key="d.truckId"
                    >{{ d.truckNumber }}</a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span="16">
                <a-col :span="8">
                  <p class="descData">司机：</p>
                </a-col>
                <a-col :span="16">{{driverName}}</a-col>
              </a-col>
              <a-col :span="16">
                <a-form-model-item label="加油凭证">
                  <ud-upload @uploadFile="voucherPicsUpload" :length="10"></ud-upload>
                </a-form-model-item>
              </a-col>
            </template>
          </a-form-model>
        </a-col>
      </a-row>
    </a-modal>

    <a-modal
      :visible="visibleDetail"
      title="查看详情"
      :body-style="{padding: 0}"
      centered
      :footer="null"
      @cancel="handleCancelDetail"
    >
      <inAndOutDetail v-if="inAndOutId" :inAndOutId="inAndOutId" />
    </a-modal>

    <a-modal
      :visible="visibleInvoice"
      title="发票详情"
      :bodyStyle="{minHeight: '400px'}"
      centered
      width="720px"
      :footer="null"
      @cancel="handleCancelPurchase"
    >
      <purchaseDetail v-if="purchaseId" :id="purchaseId" />
    </a-modal>
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import echartsLiquidfill from 'echarts-liquidfill'
import moment from 'moment'
import debounce from 'lodash/debounce'
import upload from '@/components/UpLoad'
import { commonExport } from '@/api/request'
import { queryCustNameList, queryTruckNumberAndDriverDown } from '@/api'
import {
  queryTruckOilInfo, queryOilManageOilPurchaseList, queryOilManageOilInAndOutList,
  addTruckOilPurchase, queryPurchaseByOilVolume, addTruckOilInAndOut
} from '@/api/landCenter'
import inAndOutDetail from './inAndOutDetail'
import purchaseDetail from './purchaseDetail'

const queryArr = [queryOilManageOilPurchaseList, queryOilManageOilInAndOutList]
const queryKey = ['purchaseId', 'batchNo']
let queryColumn = null
const queryScroll = [{ x: 2200 }, { x: 1500 }]

const searchForm = (i) => {
  if (i === 1) {
    return {
      custName: '', // 结算对象
      isSettle: ''// 发票状态是否结清：1是，0否
    }
  } else if (i === 2) {
    return {
      truckNumber: '', // 车牌
      driverName: ''// 司机
    }
  }
}

const searchDate = {
  time1: '', // 开始时间
  time2: '' // 结束时间
}
const fomrMessage = `必填项不能为空`

export default {
  data () {
    const column1 = [
      {
        title: '采购批次',
        dataIndex: 'batchNo'
      },
      {
        title: '采购油量(L) | (吨)',
        dataIndex: 'oilVolumeAndWeight',
        customRender: (text, record, index) => {
          return `${record.oilVolume} | ${record.oilWeight}`
        }
      },
      {
        title: '油单价(元/L) | (元/吨）',
        dataIndex: 'priceVolumeAndWeight',
        customRender: (text, record, index) => {
          return `${record.priceVolume} | ${record.priceWeight}`
        }
      },
      {
        title: '运费单价(元/L) | (元/吨）',
        dataIndex: 'priceFreightAndWeight',
        customRender: (text, record, index) => {
          return `${record.priceFreight} | ${record.priceFreightTon}`
        }
      },
      {
        title: '总单价(元/L) | (元/吨）',
        dataIndex: 'priceLiterAndWeight',
        customRender: (text, record, index) => {
          return `${record.priceLiter} | ${record.price}`
        }
      },
      {
        title: '油费金额（元）',
        dataIndex: 'oilAmount'
      },
      {
        title: '运费金额(元)',
        dataIndex: 'freightAmount'
      },
      {
        title: '交易总金额(元）',
        dataIndex: 'totalAmount'
      },
      {
        title: '剩余油量(L) | (吨)',
        dataIndex: 'remainingOilAndWeight',
        customRender: (text, record, index) => {
          return `${record.remainingOil} | ${record.remainingOilTon}`
        }
      },
      {
        title: '结算对象',
        dataIndex: 'custName'
      },
      {
        title: '日期',
        dataIndex: 'createTime',
        width: '120px'
      },
      {
        title: '发票状态',
        dataIndex: 'isSettle',
        width: '120px',
        customRender: (text, record, index) => {
          if (text === 1) {
            return <a-badge status="success" text="已结清" />
          } else if (text === 0) {
            return <a-badge status="error" text="未结清" />
          }
        },
        _needName: true
      },
      {
        title: '发票号',
        scopedSlots: { customRender: 'invoiceNo' },
        fixed: 'right',
        width: 120
      }
    ]

    const column2 = [
      {
        title: '加油批次',
        dataIndex: 'batchNo'
      },
      {
        title: '加油量(L）',
        dataIndex: 'oilVolume'
      },
      {
        title: '交易金额（元）',
        dataIndex: 'totalAmount'
      },
      {
        title: '结余油量（L）',
        dataIndex: 'remainingOil'
      },
      {
        title: '当前里程数（km）',
        dataIndex: 'mileage'
      },
      {
        title: '车辆',
        dataIndex: 'truckNumber'
      },
      {
        title: '司机',
        dataIndex: 'driverName'
      },
      {
        title: '日期',
        dataIndex: 'createTime'
      },
      {
        title: '操作',
        width: '110px',
        fixed: 'right',
        scopedSlots: { customRender: 'detail' }
      }
    ]

    queryColumn = [column1, column2]

    this.handleNameChange = debounce(this.handleNameChange, 800)
    this.handleTruckNumberAndDriverChange = debounce(this.handleTruckNumberAndDriverChange, 800)

    return {
      labelCol: { span: 5 },
      wrapperCol: { span: 19 },
      truckOilInfo: {
        remainingOil: '', // 当前库存(L)
        purchaseOilVolume: '', // 采购入库（L）
        purchaseAmount: '', // 采购总金额（元）
        inAndOutOilVolume: '', // 加油出库（L）
        inAndOutAmount: '' // 出库总金额（元）
      },
      rowKey: queryKey[0],
      scrollX: queryScroll[0],
      column: queryColumn[0],
      searchForm1: searchForm(1),
      searchForm2: searchForm(2),
      searchDate,
      searchDateRange: null,
      loading: false,
      tableData: [],
      pagination: {},
      pageNum: 1,
      pageSize: 10,
      tabIndex: 1, // 当前tab
      visible: false,
      confirmLoading: false,
      businessType: 1,
      form: this.createForm1(),
      form2: this.createForm2(),
      driverName: '--',
      formRules: {
        oilWeight: [{ required: true, message: fomrMessage, trigger: 'blur' }],
        priceWeight: [{ required: true, message: fomrMessage, trigger: 'blur' }],
        priceFreight: [{ required: true, message: fomrMessage, trigger: 'blur' }],
        price: [{ required: true, message: fomrMessage, trigger: 'blur' }],
        custId: [{ required: true, message: fomrMessage, trigger: ['blur', 'change'] }],
        tractorId: [{ required: true, message: fomrMessage, trigger: ['blur', 'change'] }],
        driverId: [{ required: true, message: fomrMessage, trigger: ['blur', 'change'] }],
        oilVolume: [{ required: true, message: fomrMessage, trigger: 'blur' }],
        mileage: [{ required: true, message: fomrMessage, trigger: 'blur' }]
      },
      nameLikeData: [],
      type2Columns: [{
        title: '采购批次',
        dataIndex: 'batchNo'
      }, {
        title: '单价(元/L)',
        dataIndex: 'price'
      }, {
        title: '油量(L)',
        dataIndex: 'oilVolume'
      }, {
        title: '交易金额(元)',
        dataIndex: 'amount'
      }],
      type2Data: {
        totalAmount: '--',
        purchaseList: []
      },
      detailClose: false,
      truckNumberAndDriverData: [],
      visibleDetail: false,
      inAndOutId: null,
      // 发票详情
      visibleInvoice: false,
      purchaseId: null
    }
  },
  components: {
    'ud-upload': upload,
    'inAndOutDetail': inAndOutDetail,
    'purchaseDetail': purchaseDetail
  },
  created () {

  },
  computed: {
    searchTable1Show () {
      return this.rowKey === 'purchaseId'
    },
    isbusinessType1 () {
      return this.businessType === 1
    },
    formx () {
      return this.businessType === 1 ? this.form : this.form2
    },
    oilWeightComputed () {
      return this.form.oilWeight ? Math.round(this.form.oilWeight * 1176 * 100) / 100 : '--'
    },
    priceWeightComputed () {
      return this.form.priceWeight ? Math.round(this.form.priceWeight * 100 / 1176) / 100 : '--'
    },
    priceFreightComputed () {
      return this.form.priceFreight ? Math.round(this.form.priceFreight * 1176 * 100) / 100 : '--'
    },
    priceComputed () {
      return this.form.price ? Math.round(this.form.price * 100 / 1176) / 100 : '--'
    },
    fee1 () {
      let a = this.form.oilWeight * this.form.priceWeight
      return Math.round(a * 100) / 100
    },
    fee2 () {
      let a = this.oilWeightComputed * this.form.priceFreight
      return a ? Math.round(a * 100) / 100 : '0'
    },
    fee3 () {
      const p = this.form.oilWeight * this.form.price
      return Math.round(p * 100) / 100
    }
  },
  methods: {
    createForm1 () {
      this.nameLikeData = []
      return {
        oilWeight: '', // 采购油量（吨）
        priceWeight: '', // 油费单价(元/吨)
        priceFreight: '', // 运费单价(元/L)
        price: '', // 总单价(元/吨)
        custId: '' // 结算对象id（售油方）
      }
    },
    createForm2 () {
      this.type2Data = {
        totalAmount: '--',
        purchaseList: []
      }
      this.detailClose = false
      return {
        tractorId: '', // 牵引车id
        driverId: '', // 司机id
        oilVolume: '', // 油量
        voucherPics: '', // 凭证图
        mileage: ''
      }
    },
    tabChange (i) {
      this.tabIndex = i
      this.businessType = i
      this[`searchForm${i}`] = searchForm(i)
      this.searchDateRange = null
      this.handleSubmit1()
    },
    onChangeDate (date, dateStr) {
      this.searchDate.time1 = dateStr[0]
      this.searchDate.time2 = dateStr[1]
      if (this.searchDate.time1) {
        this.searchDateRange = [moment(dateStr[0]), moment(dateStr[1])]
      } else {
        this.searchDateRange = null
      }
    },
    handleSubmit1 () {
      this.pageNum = 1
      this.handleSubmit()
    },
    handleSubmit () {
      this.initInfo()

      let i = this.tabIndex
      this.scrollX = queryScroll[i - 1]
      this.column = queryColumn[i - 1]
      this.rowKey = queryKey[i - 1]
      this.loading = true
      queryArr[i - 1]({
        ...this[`searchForm${i}`],
        ...this.searchDate,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(rsp => {
        this.loading = false
        this.tableData = rsp.data.list
        this.pagination = {
          current: this.pageNum,
          pageSize: rsp.data.pageSize,
          total: rsp.data.total,
          showQuickJumper: false,
          showSizeChanger: true,
          showTotal: total => `共${total}条记录 第${this.pageNum}/${rsp.data.pages}页`,
          onChange: pageNum => {
            this.pageNum = pageNum
            this.handleSubmit()
          },
          onShowSizeChange: (current, size) => {
            this.pageNum = current
            this.pageSize = size
            this.handleSubmit()
          }
        }
      })
    },
    liquidFill (res) {
      let liquid = this.$echarts.init(
        document.getElementById('liquidFill')
      )
      let result
      if (res > 20 * 1176) {
        result = 0.5
      } else {
        result = 0.2
      }
      liquid.setOption({
        series: [
          {
            type: 'liquidFill',
            data: [result],
            radius: '95%',
            backgroundStyle: {
              color: '#fff',
              shadowColor: '#fff',
              shadowBlur: 0
            },
            itemStyle: {
              normal: {
                shadowBlur: 0
              }
            },
            outline: {
              show: true, // 是否显示轮廓 布尔值
              borderDistance: 5, // 外部轮廓与图表的距离 数字
              itemStyle: {
                borderColor: result === 0.5 ? '#1890FF' : '#f5222d', // 边框的颜色
                borderWidth: 2 // 边框的宽度
              }
            },
            color: result === 0.5 ? ['#1890FF'] : ['#f5222d'],
            label: {
              position: ['50%', '50%'],
              formatter: function (param) {
                return `当前库存(L)\n${res}`
              },
              fontSize: 14,
              color: '#666'
            }
          }
        ]
      })
    },
    exportExcel () {
      const i = this.tabIndex
      if (i === 1) {
        commonExport('/truckStock/exportOilManageOilPurchaseList', {
          ...this.searchForm1,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          columns: queryColumn[0]
        })
      } else if (i === 2) {
        commonExport('/truckStock/exportOilManageOilInAndOutList', {
          ...this.searchForm2,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          columns: queryColumn[1]
        })
      }
    },
    createRecord (id) {
      if (!this.$root._bc.createRecord) {
        this.$message.error('您无此权限！')
        return
      }
      this.handleNameChange()
      this.handleTruckNumberAndDriverChange()
      this.handleChangeBusinessType()
      this.visible = true
    },
    handleAdd () {
      this.$refs.rulesForm.validate(valid => {
        if (valid) {
          this.confirmLoading = true
          if (this.isbusinessType1) {
            addTruckOilPurchase(this.form).then(rsp => {
              this.$message.success('新增成功')
              this.handleCancel()
              this.handleSubmit()
              setTimeout(() => { this.confirmLoading = false }, 1000)
            }).catch(() => { this.confirmLoading = false })
          } else {
            addTruckOilInAndOut(this.form2).then(rsp => {
              this.$message.success('新增成功')
              this.handleCancel()
              this.handleSubmit()
              setTimeout(() => { this.confirmLoading = false }, 1000)
            }).catch(() => { this.confirmLoading = false })
          }
        }
      })
    },
    handleCancel () {
      this.visible = false
    },
    handleChangeBusinessType () {
      this.form = this.createForm1()
      this.form2 = this.createForm2()
      this.driverName = ''
    },
    handleNameChange (nameLike = '') {
      queryCustNameList({
        nameLike,
        belongCompany: 'JIA_TE',
        custTypeLike: 'SUPPLIER',
        status: 1,
        isPayable: 1
      }).then(rsp => {
        this.nameLikeData = rsp.data
      })
    },
    emptyChange (e) {
      this.handleNameChange()
    },
    checkPurchaseByOilVolume () {
      const oilVolume = this.form2.oilVolume
      if (oilVolume) {
        queryPurchaseByOilVolume({ oilVolume }).then(rsp => {
          this.type2Data = rsp.data
        })
      } else {
        this.type2Data = {
          totalAmount: '--',
          purchaseList: []
        }
      }
    },
    handleTruckNumberAndDriverChange (truckNumber = '') {
      queryTruckNumberAndDriverDown({
        truckNumber
      }).then(rsp => {
        this.truckNumberAndDriverData = rsp.data
      })
    },
    handleTruckNumberAndDriverSelect (id) {
      const t = this.truckNumberAndDriverData.filter(v => v.truckId === id)[0]
      this.form2.driverId = t.driverId
      this.form2.tractorId = t.truckId
      this.driverName = t.driverName
      this.handleTruckNumberAndDriverChange()
    },
    voucherPicsUpload (urls) {
      this.form2.voucherPics = urls
    },
    viewDetail (inAndOutId) { // 查看加油出库详情
      this.inAndOutId = inAndOutId
      this.visibleDetail = true
    },
    handleCancelDetail () {
      this.inAndOutId = null
      this.visibleDetail = false
    },
    viewInvoice (purchaseId) {
      this.purchaseId = purchaseId
      this.visibleInvoice = true
    },
    createInvoice (purchaseId) { // 添加发票
      if (!this.$root._bc.createInvoice) {
        this.$message.error('您无此权限！')
        return
      }
      this.purchaseId = purchaseId
      this.visibleInvoice = true
    },
    handleCancelPurchase () {
      this.purchaseId = null
      this.visibleInvoice = false
      this.handleSubmit()
    },
    initInfo () {
      queryTruckOilInfo({}).then(rsp => {
        this.truckOilInfo = rsp.data
        this.liquidFill(this.truckOilInfo.remainingOil)
      })
    }
  },
  watch: {
    'form.priceFreight' (d) {
      const a = this.form.priceWeight
      if (d && a && d - parseFloat(d) === 0) {
        this.form.price = Math.round((this.priceFreightComputed + parseFloat(a)) * 100) / 100
      }
    },
    'form.priceWeight' (d) {
      const a = this.form.priceFreight
      if (d && a && d - parseFloat(d) === 0) {
        this.form.price = Math.round((parseFloat(d) + this.priceFreightComputed) * 100) / 100
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.handleSubmit()
    })
  }
}
</script>

<style lang="less" scoped>
.card-container {
  background: #f0f2f5;
  overflow: hidden;
  padding: 24px;
  .ant-tabs-card {
    .ant-tabs-content {
      height: 120px;
      margin-top: -16px;
      .ant-tabs-tabpane {
        background: #fff;
        padding: 40px 24px 24px 24px;
      }
    }
    .ant-tabs-bar {
      border-color: #fff;
      .ant-tabs-tab {
        border-color: transparent;
        background: transparent;
      }
      .ant-tabs-tab-active {
        border-color: #fff;
        background: #fff;
      }
    }
  }
}
.computedData {
  height: 40px;
  line-height: 40px;
  margin-bottom: 24px;
  text-indent: 5px;
}

.descData {
  text-align: right;
  color: #000000d9;
}
</style>
<style>
.ant-card-body1 {
  background: #f9fcff;
  border: 1px #dbe3ff solid;
  padding: 24px 24px 16px 24px;
}
.caiG1 {
  background: url(../../../../static/images/ChuanbOil2.png) no-repeat right center;
}
.caiG2 {
  background: url(../../../../static/images/ChuanbOil1.png) no-repeat right center;
}
.ant-card-body1 .cgYoul {
  font-size: 40px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 400;
  margin-bottom: 0;
}
.ant-card-body1 .caiGou {
  margin-bottom: 0;
  line-height: 16px;
}
.ant-card-body1 .cgSale {
  margin-bottom: 0;
  line-height: 16px;
  border-top: 1px #dbe3ff solid;
  padding-top: 16px;
}
.ant-card-body1 .cgSale span {
  float: right;
  font-size: 18px;
  font-weight: bold;
}
</style>
